<template>
  <div>
    <ListHead />
    <el-main :xs="24" :sm="24" :md="24" :lg="24">
      <div class="edit-step1">
        <ul>
          <li @click="createNow">
            <div class="addbg"></div>
            <span>立即创建</span>
          </li>
          <li
            v-for="(product, index) in products"
            :key="index"
            @click="goApp(product)"
          >
            <img
              :src="
                $store.state.qiniu + product.app_cover + $store.state.imgRotate
              "
            />
            <div>
              <el-tooltip
                class="item"
                effect="dark"
                :content="product.app_name"
                placement="bottom"
              >
                <p class="name">{{ product.app_name }}</p>
              </el-tooltip>
              <p>{{ product.group_name }}</p>
              <p>
                {{
                  product.guoqi_at != null ? `${product.guoqi}过期` : "永久有效"
                }}
              </p>
            </div>
          </li>
        </ul>
      </div>
    </el-main>
  </div>
</template>

<script>
import { GETLIST } from "./service";

// import shop from '@/router/shop'
export default {
  components: {
    ListHead: () => import("publicCom/ListHead")
  },
  data() {
    return {
      products: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      await GETLIST().then(({ code, data }) => {
        if (code === 200) {
          this.products = data;
        }
      });
    },
    createNow() {
      this.$router.push({ name: "step2" });
    },
    goApp(product) {
      if (product.guoqi_at != null) {
        let time = product.guoqi;
        // 时间转换
        let strtime = time.replace("/-/g", "/");
        // 过期时间
        let overdueTime = new Date(strtime);
        // 现在时间
        let nowTime = new Date();
        // 判断时间是否过期
        if (overdueTime < nowTime) {
          product.guoqi = "已过期";
        } else {
          // product.guoqi = product.guoqi;
        }
      }
      this.$store.commit("app_id", product.app_id);
      this.$store.commit("app_name", product.app_name);
      this.$store.commit("wx_appid", product.wx_appid);
      this.$store.commit("group_id", product.group_id);
      this.$store.commit("group_name", product.group_name);
      this.$store.commit("app_name", product.app_name);
      this.$store.commit("app_cover", product.app_cover);
      this.$router.push({ name: "HomePage" });
    }
  }
};
</script>
<style lang="scss" scoped>
.edit-step1 {
  background: #fff;
  padding: 40px 5%;
  -moz-box-shadow: 0px 0px 10px #e3e3e3;
  -webkit-box-shadow: 0px 0px 10px #e3e3e3;
  box-shadow: 0px 0px 10px #e3e3e3;
  box-sizing: border-box;
  border-radius: 6px;
  ul {
    overflow: hidden;
    li {
      width: 300px;
      height: 123px;
      float: left;
      border-radius: 4px;
      margin: 20px 10px;
      cursor: pointer;
      border: 1px solid #d9d9d9;
      img {
        width: 59px;
        height: 59px;
        float: left;
        margin: 25px 20px;
        border-radius: 50%;
      }
      div {
        font-size: 14px;
        margin: 18px 0;
        .name {
          font-size: 20px;
          font-weight: 700;
          color: #333;
          position: relative;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        p {
          margin-top: 10px;
        }
      }
      &:first-child {
        font-size: 15px;
        color: #578fbd;
        text-align: center;
        border: 1px solid #d9d9d9;
        .addbg {
          width: 74px;
          height: 74px;
          float: left;
          margin: 24.5px 55px;
          background: url("http://oss.ztwlxx.cn/step2add.png");
        }
        span {
          float: left;
          font-size: 15px;
          line-height: 123px;
        }
      }
    }
  }
}
</style>
